<template>
    <view class="success-page">
        <image src="https://img.thumbrary.com/success.png"/>
        <view class="title">支付成功</view>
        <view class="content">支付方式：微信支付 支付金额：¥{{orderMoney}}</view>
        <view class="content">订单号：{{orderNum}}<text @tap="copyHandle" style="margin-left: 8rpx; color:#2BA8FC;">复制</text></view>
        <view class="btn-wrappers common-flex-between">
            <text class="btn" :class="[isActive? 'black' : 'blue']" @tap.stop="watchOrder">立即激活</text>
            <text class="btn black" @tap.stop="giveFriend">发送给好友</text>
        </view>
        <gwShowModal
                v-model="showModal"
                type="tips"
                width="550rpx"
                height="260rpx"
                @confirm="confirmHandle"
                :tipsContent="tipsObj[modalType]"/>
    </view>
</template>

<script>
    import gwShowModal from '@/pages/components/gw-show-modal'
    import service from "@/service";
    export default {
        name: "card",
        components: {
            gwShowModal
        },
        data(){
            return{
                vipCardMemberLogId: '',
                orderNum: '',
                orderMoney: '',
                isActive: false,
                showModal: false,
                modalType: 'active',
                tipsObj: {
                    active: '确认激活该会员卡吗？',
                    giveFriend: '确认赠送给他人吗？'
                }
            }
        },
        onLoad(params){
            let { vipCardMemberLogId, orderMoney, orderNum } = params;
            this.vipCardMemberLogId = vipCardMemberLogId;
            this.orderMoney = orderMoney;
            this.orderNum = orderNum;
        },
        methods: {
            giveFriend(){
                if(this.isActive){
                    uni.showToast({
                        title: `已经激活成功！`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                this.modalType='giveFriend';
                this.showModal = true;
            },
            watchOrder(){
                if(this.isActive){
                    uni.showToast({
                        title: `已经激活成功！`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                this.modalType='active';
                this.showModal = true;
            },
            confirmHandle(){
                this.showModal = false;
                if(this.modalType === 'active'){
                    this.activeCardHandle()
                } else {
                    uni.navigateTo({
                        url: `../vip/give-friend?vipCardMemberLogId=${this.vipCardMemberLogId}`
                    })
                }
            },
            activeCardHandle(){
                uni.showLoading({
                    title: '',
                });
                service.mineService.putMcards({
                    data: {
                        vipCardMemberLogId: this.vipCardMemberLogId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.isActive = true;
                            setTimeout(()=>{
                                uni.navigateTo({
                                    url: `../vip/vip-center`
                                });
                            }, 500);
                            uni.showToast({
                                title: `激活成功`,
                                duration: 2500,
                                icon: 'none'
                            });
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            copyHandle(){
                wx.setClipboardData({
                    data: this.orderNum,
                    success: function(res) {
                        wx.getClipboardData({
                            success: function(res) {
                                console.log('复制内容为', res.data)
                            }
                        })
                    },
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .success-page {
        text-align: center;
        image{
            width: 302rpx;
            height: 302rpx;
            border-radius: 50%;
            margin-top: 128rpx;
            margin-bottom: 60rpx;
        }
        .title{
            font-size: 34rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        .content{
            color: #999999;
            line-height: 40rpx;
        }
        .btn-wrappers{
            padding: 50rpx;
            margin-top: 90rpx;
            .btn{
                width:310rpx;
                height:88rpx;
                border-radius: 8rpx;
                line-height: 88rpx;
            }
            .blue{
                border: 1rpx solid #2BA8FC;
                color: #2BA8FC;
            }
            .black{
                border: 1rpx solid #707070;
                color: #707070;
            }
        }
    }
</style>